<template>
  <div class="app-container">
    <el-card style="height: 80px; margin-bottom: 10px;">
      <div style="margin-bottom: 20px;">
        <el-row :guest="20">
          <el-col :span="6">
            <el-input v-model="query.name" placeholder="请输入姓名或手机号" clearable @clear="getAdminList" />
          </el-col>
          <el-col :span="2">
            <el-button type="success" style="margin-left: 10px;" icon="el-icon-search" size="medium" @click="getAdminList">
              搜索
            </el-button>
          </el-col>
          <el-col :span="2">
            <el-button style="margin-left: 10px;" type="primary" icon="el-icon-circle-plus-outline" size="medium" @click="add">
              添加
            </el-button>
          </el-col>
        </el-row>
      </div>
    </el-card>


    <el-card>
      <el-table
        v-loading="listLoading"
        :data="list"
        fit
        @sort-change="sortChange"
        highlight-current-row
        style="width: 100%;"
      >
        <el-table-column label="ID" prop="id" sortable="custom" :class-name="getSortClass('id')" align="center" width="60">
          <template slot-scope="{row}">
            <span>{{ row.id }}</span>
          </template>
        </el-table-column>
        <el-table-column label="登录名" width="110px" align="center">
          <template slot-scope="{row}">
            <span>{{ row.username }}</span>
          </template>
        </el-table-column>
        <el-table-column label="姓名" width="110px" align="center">
          <template slot-scope="{row}">
            <span>{{ row.name }}</span>
          </template>
        </el-table-column>
        <el-table-column label="手机" width="110px" align="center">
          <template slot-scope="{row}">
            <span>{{ row.phone }}</span>
          </template>
        </el-table-column>
        <el-table-column label="电话" width="130px" align="center">
          <template slot-scope="{row}">
            <span>{{ row.telephone }}</span>
          </template>
        </el-table-column>
        <el-table-column label="地址" width="310px" align="center">
          <template slot-scope="{row}">
            <span>{{ row.address }}</span>
          </template>
        </el-table-column>
        <el-table-column label="状态" align="center" width="100">
          <template slot-scope="scope">
            <el-switch v-model="scope.row.state"></el-switch>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="300" class-name="small-padding fixed-width">
          <template slot-scope="{row,$index}">
            <el-button type="success" icon="el-icon-circle-plus-outline" size="mini" plain round @click="toAssignRole(row)">
              分配角色
            </el-button>
            <el-button type="primary" icon="el-icon-edit" size="mini" plain round @click="handleUpdate(row)">
              编辑
            </el-button>
            <el-button size="mini" icon="el-icon-delete" type="danger" plain round @click="handleDelete(row,$index)">
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <pagination v-show="totalCount>0" :total="totalCount" :page.sync="query.currPageNo" :limit.sync="query.pageSize" @pagination="getAdminList" />
    </el-card>

  </div>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// 例如：import 《组件名称》 from '《组件路径》';
// 从src/api/user.js中解构出pageUserList()方法并在当前组件中导入
import { pageUserList } from '@/api/user'
// 导入分页公共组件
import Pagination from '@/components/Pagination'
export default {
// import引入的组件需要注入到对象中才能使用
  components: {
    Pagination
  },
  // props实现父子组件传递数据
  props: {},
  data() {
    // 这里存放数据
    return {
      // 用来保存t_admin管理员查询出来的分页列表信息
      list: null,
      // 用来保存分页时所需要的总记录数
      totalCount: 0,
      // 当发送异步请求用户列表数据时设置它为true,可出现正在加载中
      listLoading: true,
      query: {
        // 当前页码
        currPageNo: 1,
        // 每页显示的记录数
        pageSize: 4,
        // 查询条件，此处查询是以用户名和手机号码进行模糊查询
        name: '',
        sort: '+id'
      }
    }
  },
  // 监听属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {},
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {
    // 调用查询管理员分页列表信息的方法
    this.getAdminList()
  }, // 如果页面有keep-alive缓存功能，这个函数会触发
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
  },
  beforeCreate() {
  }, // 生命周期 - 创建之前
  beforeMount() {
  }, // 生命周期 - 挂载之前
  beforeUpdate() {
  }, // 生命周期 - 更新之前
  updated() {
  }, // 生命周期 - 更新之后
  beforeDestroy() {
  }, // 生命周期 - 销毁之前
  destroyed() {
  }, // 生命周期 - 销毁完成
  activated() {
  },
  // 方法集合
  methods: {
    // 定义查询管理员分页列表信息的方法
    getAdminList() {
      // true时，表格中就会出现正在加载图标
      this.listLoading = true
      // 调用src/api/user.js中的pageUserList()
      pageUserList(this.query).then((resp) => {
        this.listLoading = false
        this.list = resp.data.list
        // 获取总记录数
        this.totalCount = resp.data.totalCount
      }).catch((error) => {
        console.log(error)
        this.$message({
          title: '提示',
          message: '操作员列表查询失败',
          type: 'error',
          duration: 2000
        })
      })
    },
    // 排序
    sortChange(data) {
      console.log(data)
      // data.prop为排序字段，这里是id。 data.order为点击上下箭头的值，
      // 如果点击下箭头val.order的值为descending，反之为ascending
      const { prop, order } = data
      if (prop === 'id') {
        this.sortByID(order)
      }
    },
    sortByID(order) {
      if (order === 'ascending') {
        this.query.sort = '+id'
      } else {
        this.query.sort = '-id'
      }
      this.query.currPageNo = 1
      // 传到后端时this.query.sort的值为+id或为-id
      this.getAdminList()
    },
    getSortClass: function(key) {
      const sort = this.query.sort
      return sort === `+${key}` ? 'ascending' : 'descending'
    },
    // 编辑按扭的点击事件
    handleUpdate(row) {

    },
    // 删除按扭的点击事件
    handleDelete(row, index) {

    }
  }
}
</script>
<style scoped>

</style>
